# 功能导航

在这里，你可以了解到 Rsbuild 支持的主要功能。

## JavaScript 编译

| 功能           | 描述                                                             | 相关链接                                                                                                                   |
| -------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Rspack         | 默认使用 Rspack 作为打包工具                                     | <ul><li>[配置 Rspack](/guide/configuration/rspack)</li></ul>                                                               |
| SWC 编译       | 默认通过 SWC 对 JavaScript 和 TypeScript 代码进行转译和压缩      | <ul><li>[配置 SWC](/guide/configuration/swc)</li></ul>                                                                     |
| TS 编译        | 默认通过 SWC 编译 TS 文件                                        | <ul><li>[TypeScript 转译](/guide/basic/typescript#typescript-转译)</li></ul>                                               |
| 代码压缩       | 默认在生产模式构建时开启代码压缩                                 | <ul><li>[output.minify](/config/output/minify)</li></ul>                                                                   |
| Polyfill 注入  | 可选功能，注入 core-js 等 polyfill                               | <ul><li>[浏览器兼容性](/guide/advanced/browser-compatibility)</li><li>[output.polyfill](/config/output/polyfill)</li></ul> |
| SourceMap 生成 | 默认在开发模式生成 SourceMap                                     | <ul><li>[output.sourceMap](/config/output/source-map)</li></ul>                                                            |
| 文件别名       | 可选功能，通过 alias 设置文件别名                                | <ul><li>[路径别名](/guide/advanced/alias)</li><li>[resolve.alias](/config/resolve/alias)</li></ul>                         |
| Babel 编译     | 可选功能，通过 Babel 对 JavaScript 和 TypeScript 代码进行转译    | <ul><li>[Babel 插件](/plugins/list/plugin-babel)</li></ul>                                                                 |
| Node 产物      | 可选功能，构建运行在 Node.js 环境的产物                          | <ul><li>[Node 产物](/config/output/target#node-产物)</li></ul>                                                             |
| Web Workers    | 可选功能，使用 Web Workers                                       | <ul><li>[Web Workers](/guide/basic/web-workers)</li></ul>                                                                  |
| 浏览器范围     | 可选功能，通过 browserslist 来设置 Web 应用需要兼容的浏览器范围  | <ul><li>[浏览器范围](/guide/advanced/browserslist)</li></ul>                                                               |
| 兼容性检查     | 可选功能，分析构建产物中是否存在当前浏览器范围下不兼容的高级语法 | <ul><li>[@rsbuild/plugin-check-syntax](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)</li></ul>            |
| 注入环境变量   | 可选功能，向代码中注入环境变量或表达式                           | <ul><li>[环境变量](/guide/advanced/env-vars)</li></ul>                                                                     |
| Node polyfill  | 可选功能，在浏览器端注入 Node 核心模块的 polyfills               | <ul><li>[Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)</li></ul>                     |
| TS 类型检查    | 可选功能，运行 type checker 检查代码中的类型问题                 | <ul><li>[类型检查](/guide/basic/typescript#类型检查)</li></ul>                                                             |
| 模块联邦       | 可选功能，动态加载模块，并共享依赖关系                           | <ul><li>[模块联邦](/guide/advanced/module-federation)</li></ul>                                                            |

## CSS 编译

| 功能                 | 描述                                       | 相关链接                                                                                                        |
| -------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| Lightning CSS        | 默认启用，使用 Lightning CSS 降级 CSS 语法 | <ul><li>[CSS](/guide/styling/css-usage)</li></ul>                                                               |
| Tailwind CSS         | 可选功能，使用 Tailwind CSS                | <ul><li>[Tailwind CSS](/guide/styling/tailwindcss)</li></ul>                                                    |
| UnoCSS               | 可选功能，使用 UnoCSS                      | <ul><li>[UnoCSS](/guide/styling/unocss)</li></ul>                                                               |
| PostCSS 转换         | 可选功能，开启 PostCSS 转换                | <ul><li>[CSS](/guide/styling/css-usage)</li><li>[tools.postcss](/config/tools/postcss)</li></ul>                |
| Sass 预处理器        | 可选功能，编译 Sass/Scss 文件              | <ul><li>[CSS](/guide/styling/css-usage)</li><li>[Sass 插件](/plugins/list/plugin-sass)</li></ul>                |
| Less 预处理器        | 可选功能，编译 Less 文件                   | <ul><li>[CSS](/guide/styling/css-usage)</li><li>[Less 插件](/plugins/list/plugin-less)</li></ul>                |
| Stylus 预处理器      | 可选功能，编译 Stylus 文件                 | <ul><li>[CSS](/guide/styling/css-usage)</li><li>[Stylus 插件](/plugins/list/plugin-stylus)</li></ul>            |
| CSS Modules 编译     | 默认支持编译 CSS Modules 文件              | <ul><li>[CSS Modules](/guide/styling/css-modules)</li><li>[tools.cssLoader](/config/tools/css-loader)</li></ul> |
| CSS Modules 类型提示 | 可选功能，生成 CSS Modules 的类型定义文件  | <ul><li>[Typed CSS Modules 插件](https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules)</li></ul>  |
| CSS 压缩             | 默认在生产模式构建时开启 CSS 压缩          | <ul><li>[CSS](/guide/styling/css-usage)</li></ul>                                                               |
| 内联 CSS 到 JS 中    | 可选功能，将 CSS 文件内联到 JS 文件中      | <ul><li>[CSS](/guide/styling/css-usage)</li><li>[output.injectStyles](/config/output/inject-styles)</li></ul>   |

## HTML 编译

| 功能          | 描述                            | 相关链接                                                                                                                          |
| ------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| 设置标题      | 设置 HTML 的 `<title>` 标签     | <ul><li>[设置页面标题](/guide/basic/html-template#设置页面标题)</li><li>[html.title](/config/html/title)</li></ul>                |
| 设置 meta     | 设置 HTML 的 `<meta>` 标签      | <ul><li>[设置 meta 标签](/guide/basic/html-template#设置-meta-标签)</li><li>[html.meta](/config/html/meta)</li></ul>              |
| 设置 favicon  | 设置 favicon 图标               | <ul><li>[设置页面图标](/guide/basic/html-template#设置页面图标)</li><li>[html.favicon](/config/html/favicon)</li></ul>            |
| 设置 app 图标 | 设置 Web 应用的图标             | <ul><li>[设置页面图标](/guide/basic/html-template#设置页面图标)</li><li>[html.appIcon](/config/html/app-icon)</li></ul>           |
| EJS 模板      | 可选功能，使用 EJS 模板语法     | <ul><li>[模板引擎 - EJS](/guide/basic/html-template#ejs)</li></ul>                                                                |
| Pug 模板引擎  | 可选功能，使用 Pug 模板语法     | <ul><li>[Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)</li></ul>                                                |
| 内联 JS 文件  | 可选功能，将 JS 内联到 HTML 中  | <ul><li>[静态资源内联](/guide/optimization/inline-assets)</li><li>[output.inlineScripts](/config/output/inline-scripts)</li></ul> |
| 内联 CSS 文件 | 可选功能，将 CSS 内联到 HTML 中 | <ul><li>[静态资源内联](/guide/optimization/inline-assets)</li><li>[output.inlineStyles](/config/output/inline-styles)</li></ul>   |

## Server

| 功能         | 描述                                             | 相关链接                                                        |
| ------------ | ------------------------------------------------ | --------------------------------------------------------------- |
| Public 目录  | 默认将 public 目录作为静态资源服务的文件夹       | <ul><li>[server.publicDir](/config/server/public-dir)</li></ul> |
| SSR          | 可选功能，实现服务端渲染                         | <ul><li>[服务端渲染](/guide/advanced/ssr)</li></ul>             |
| 请求代理     | 可选功能，将请求代理到指定的服务上               | <ul><li>[server.proxy](/config/server/proxy)</li></ul>          |
| 打开页面     | 可选功能，在启动 server 时自动在浏览器中打开页面 | <ul><li>[server.open](/config/server/open)</li></ul>            |
| HTTPS        | 可选功能，开启 server 对 HTTPS 的支持            | <ul><li>[server.https](/config/server/https)</li></ul>          |
| 自定义中间件 | 可选功能，使用自定义的中间件                     | <ul><li>[中间件](/guide/basic/server#中间件)</li></ul>          |

## UI 框架

| 功能          | 描述                                    | 相关链接                                                                                      |
| ------------- | --------------------------------------- | --------------------------------------------------------------------------------------------- |
| React         | 可选功能，开启 React JSX 语法编译       | <ul><li>[React 插件](/plugins/list/plugin-react)</li></ul>                                    |
| React Refresh | 可选功能，开启 React Refresh 热更新     | <ul><li>[模块热更新](/guide/advanced/hmr)</li><li>[dev.hmr](/config/dev/hmr)</li></ul>        |
| SVGR          | 可选功能，转换 SVG 为 React 组件        | <ul><li>[SVGR 插件](/plugins/list/plugin-svgr)</li></ul>                                      |
| Vue 3 SFC     | 可选功能，开启 Vue 3 SFC 单文件组件编译 | <ul><li>[Vue 插件](/plugins/list/plugin-vue)</li></ul>                                        |
| Vue 3 JSX     | 可选功能，开启 Vue 3 JSX 语法编译       | <ul><li>[Vue JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx)</li></ul>    |
| Vue 2 SFC     | 可选功能，开启 Vue 2 SFC 单文件组件编译 | <ul><li>[Vue 2 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2)</li></ul>         |
| Vue 2 JSX     | 可选功能，开启 Vue 2 JSX 语法编译       | <ul><li>[Vue 2 JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx)</li></ul> |
| Svelte        | 可选功能，开启 Svelte 组件编译          | <ul><li>[Svelte 插件](/plugins/list/plugin-svelte)</li></ul>                                  |
| Solid         | 可选功能，开启 Solid JSX 语法编译       | <ul><li>[Solid 插件](/plugins/list/plugin-solid)</li></ul>                                    |

## 静态资源

| 功能               | 描述                                           | 相关链接                                                                                                                         |
| ------------------ | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| 图片资源           | 支持在代码中引用图片资源                       | <ul><li>[静态资源](/guide/basic/static-assets)</li></ul>                                                                         |
| 字体资源           | 支持在代码中引用字体资源                       | <ul><li>[静态资源](/guide/basic/static-assets)</li></ul>                                                                         |
| 视频资源           | 支持在代码中引用视频资源                       | <ul><li>[静态资源](/guide/basic/static-assets)</li></ul>                                                                         |
| Wasm 资源          | 支持在代码中引用 WebAssembly 资源              | <ul><li>[引用 Wasm 资源](/guide/basic/wasm-assets)</li></ul>                                                                     |
| Node addons        | 支持在代码中引用 Node.js addons                | <ul><li>[Node addons](/config/output/target#node-addons)</li></ul>                                                               |
| 静态资源内联       | 默认将体积较小的图片等资源内联到 JS 中         | <ul><li>[静态资源内联](/guide/optimization/inline-assets)</li><li>[output.dataUriLimit](/config/output/data-uri-limit)</li></ul> |
| 清理静态资源       | 每次开始构建前，自动清理 dist 目录下的静态资源 | <ul><li>[output.cleanDistPath](/config/output/clean-dist-path)</li></ul>                                                         |
| 拷贝静态资源       | 可选功能，将静态资源拷贝到 dist 目录下         | <ul><li>[output.copy](/config/output/copy)</li></ul>                                                                             |
| 生成 manifest 文件 | 可选功能，生成 `manifest.json` 文件            | <ul><li>[output.manifest](/config/output/manifest)</li></ul>                                                                     |

## 性能和调试

| 功能                | 描述                                                           | 相关链接                                                                                                                           |
| ------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| 代码拆分            | Rsbuild 中内置了多种拆包策略，自动将代码包拆分为体积适中的文件 | <ul><li>[代码拆分](/guide/optimization/code-splitting)</li><li>[performance.chunkSplit](/config/performance/chunk-split)</li></ul> |
| 展示产物体积        | 在生产模式构建后，默认展示所有静态资源的体积信息               | <ul><li>[performance.printFileSize](/config/performance/print-file-size)</li></ul>                                                 |
| 分析构建流程        | 可选功能，使用 Rsdoctor 分析构建流程                           | <ul><li>[使用 Rsdoctor](/guide/debug/rsdoctor)</li></ul>                                                                           |
| 分析产物体积        | 可选功能，通过 Bundle Analyzer 分析产物体积                    | <ul><li>[performance.bundleAnalyze](/config/performance/bundle-analyze)</li></ul>                                                  |
| 移除 console        | 可选功能，移除代码中的 `console.[methodName]`                  | <ul><li>[performance.removeConsole](/config/performance/remove-console)</li></ul>                                                  |
| 优化 moment.js 体积 | 可选功能，移除 moment.js 多余的 locale 文件                    | <ul><li>[performance.removeMomentLocale](/config/performance/remove-moment-locale)</li></ul>                                       |
| 移除重复包          | 可选功能，移除重复引用的 npm 包                                | <ul><li>[resolve.dedupe](/config/resolve/dedupe)</li></ul>                                                                         |
| 组件库按需引入      | 可选功能，按需引入组件库的代码和样式                           | <ul><li>[source.transformImport](/config/source/transform-import)</li></ul>                                                        |
| 图片压缩            | 可选功能，对引用的图片资源进行压缩处理                         | <ul><li>[Image compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)</li></ul>                           |
| Preload             | 可选功能，对资源进行预加载                                     | <ul><li>[performance.preload](/config/performance/preload)</li></ul>                                                               |
| Prefetch            | 可选功能，对资源进行预获取                                     | <ul><li>[performance.prefetch](/config/performance/prefetch)</li></ul>                                                             |
| Preconnect          | 可选功能，对资源进行预连接                                     | <ul><li>[performance.preconnect](/config/performance/preconnect)</li></ul>                                                         |
| DNS prefetch        | 可选功能，对资源进行 DNS 预获取                                | <ul><li>[performance.dnsPrefetch](/config/performance/dns-prefetch)</li></ul>                                                      |
